<!-- 结算单详情--待审核 -->
<template>
  <div class="audit-detail">
    <el-container class="details-box">
      <!-- <div>
        <el-button
          type="primary"
          @click="auditReject"
          class="headBtn"
          size="small" >审核拒绝</el-button>
        <el-button
          type="primary"
          @click="auditPass"
          class="headBtn"
          size="small" >审核通过</el-button>
      </div> -->
      <h3>订单信息</h3>
      <!-- 列表 -->
      <el-header height="auto">
        <div class="formToptext">
          <el-form
            :inline="true"
            :model="formdata"
            ref="ruleForm"
            label-width="150px" >
            <el-form-item
              v-for="(item,index) in detailsDetailForm"
              :key="index"
              :label="item.title">
              <div
                v-if="item.key == 'orderStatus'"
                class="textBox">：{{ status[formdata[item.key]] }}
              </div>
              <div
                v-else
                class="textBox">：{{ formdata[item.key] }}</div>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <h3>产品明细</h3>
      <!-- 产品明细列表模块 -->
      <el-editable
        class="hospital-edit-box"
        :data="getList"
        height="200"
        v-loading="tableLoading"
        :columns="detailsTableColumns"
      />
      <!-- 分页模块 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />
    </el-container>
  </div>
</template>

<script>
import {
  updateSettlePurchaser,
  getBySettlePurchaser,
  getBySettlePurchaserOrder
  , getScWarehouseEntryRead } from '@const/beforeSettleApi'
import { detailsTableColumns, detailsDetailForm } from './const'
import SearchForm from '@components/businesscomponents/search'
import { brforeSettleHospitalAwaitList } from '@const/path'
import { hasIn, chunk } from 'lodash'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'

import ElEditable from '@components/el-editable'

export default {
  components: { ElEditable, SearchForm },
  data () {
    return {
      // 表格Loading
      tableLoading: false,
      // 产品明细表头
      detailsTableColumns,
      // 产品明细表格数据
      getList: [],
      // 表单编辑默认值
      formdata: {
        settleOrderCode: '',
        productSpecCount: '',
        distributorComanyName: '',
        orderStatus: '',
        settleMoney: '',
        createAt: ''
      },
      // 表单 详情展示内容-table
      detailsDetailForm,
      // 详情ID
      detailsId: this.$route.query.id,

      // 订单状态
      status: {
        0: '待审核',
        1: '审核拒绝',
        2: '待开票',
        3: '待付款',
        4: '已付款'
      },

      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0 // 总共的条数
    }
  },

  mounted () {
    this.list()
    this.getHeadInfo()
    let arr = [
      { type: 'button', val: '返回', handle: this.back }
    ]
    const btn = {
      type: 'btn',
      arr: arr
    }
    this.$store.commit('changeLayoutHandle', btn)
    this.list()
  },
  methods: {
    // 点击返回
    back () {
      this.$router.go(-1)
    },

    // 查看发票详情
    lookDetail (val) {

    },

    // // 审核拒绝
    // auditReject () {
    //   this.$axios({
    //     method: 'post',
    //     // url: 'http://47.110.130.245:3000/mock/155/guoke-deepexi-order-center/api/v1/beforeSettle/SettleDistributor/updateSettlePurchaser',
    //     url: updateSettlePurchaser,
    //     data: {
    //       settleOrderCode: this.$route.query.settleOrderCode,
    //       orderStatus: 1
    //     }
    //   }).then(res => {
    //     this.$message({
    //       type: 'success',
    //       message: '审核拒绝'
    //     })
    //     this.$router.push({
    //       path: brforeSettleHospitalAwaitList
    //     })
    //   })
    // },

    // // 审核通过
    // auditPass () {
    //   this.$axios({
    //     method: 'post',
    //     // url: 'http://47.110.130.245:3000/mock/155/guoke-deepexi-order-center/api/v1/beforeSettle/SettleDistributor/updateSettlePurchaser',
    //     url: updateSettlePurchaser,
    //     data: {
    //       settleOrderCode: this.$route.query.settleOrderCode,
    //       orderStatus: 2
    //     }
    //   }).then(res => {
    //     this.$message({
    //       type: 'success',
    //       message: '审核通过'
    //     })
    //     this.$router.push({
    //       path: brforeSettleHospitalAwaitList
    //     })
    //   })
    // },

    // 获取产品明细列表
    list () {
      this.$axios({
        method: 'post',
        // url: 'http://47.110.130.245:3000/mock/155/guoke-deepexi-order-center/api/v1/beforeSettle/SettleDistributor/getBySettlePurchaser',
        url: getBySettlePurchaser,
        data: {
          settleOrderCode: this.$route.query.settleOrderCode,
          orderStatus: Number(this.$route.query.orderStatus)
        }
      }).then(res => {
        let result = hasIn(res, ['data', 'payload']) ? res.data.payload : []
        this.totalElements = result.totalElements
        this.getList = result.content
      })
    },

    // 获取头部信息
    getHeadInfo () {
      this.$axios({
        method: 'post',
        // url: 'http://47.110.130.245:3000/mock/155/guoke-deepexi-order-center/api/v1/beforeSettle/SettleDistributor/getBySettlePurchaserOrder',
        url: getBySettlePurchaserOrder,
        data: {
          settleOrderCode: this.$route.query.settleOrderCode
        }
      }).then(res => {
        let result = hasIn(res, ['data', 'payload']) ? res.data.payload : []
        this.formdata = result[0]
      })
    },

    // 页码更改
    handleSizeChange (size) {
      this.pageSize = size
      this.list()
    },

    // 切换不一样的页面,重置一切数据
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.list()
    }
  }
}
</script>

<style lang="less">
.details-box {
  height: 100%;
  overflow: auto;

  .pagination {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    padding-right: 0;
  }

  .formToptext {
    margin-bottom: 20px;

    .el-form-item {
      margin-right: 16px;
      margin-bottom: 16px;

      .textBox {
        width: 220px;
      }
    }

    .el-form-item__label {
      padding-right: 10px;
    }
  }
}
</style>
